<!-- Horizontal Form -->
<div class="box box-info">
	<div class="box-header with-border">
		<h3 class="box-title">添加菜单</h3>
	</div>
	<!-- /.box-header -->
	<!-- form start -->
	<form class="form-horizontal">
		<div class="box-body">
			<div class="form-group">
				<label for="nameId" class="col-sm-2 control-label">类型</label>
				<div class="col-sm-10 typeRadio">
					<label class="radio-inline"> <input type="radio"
						name="typeId" value="1" checked> 菜单
					</label> <label class="radio-inline"> <input type="radio"
						name="typeId" value="2"> 按钮
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="nameId" class="col-sm-2 control-label">菜单名称</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="nameId"
						placeholder="名称">
				</div>
			</div>
			<div class="form-group">
				<label for="parentId" class="col-sm-2 control-label">上级菜单</label>
				<div class="col-sm-10">
					<input type="text" class="form-control load-sys-menu"
						readonly="readonly" id="parentId" placeholder="上级菜单">
				</div>
			</div>
			<div class="form-group">
				<label for="urlId" class="col-sm-2 control-label">菜单URL</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" id="urlId"
						placeholder="url">
				</div>
			</div>
			<div class="form-group">
				<label for="permissionId" class="col-sm-2 control-label">授权标识</label>
				<div class="col-sm-10">
					<input type="text" id="permissionId"
						placeholder="多个用逗号分隔，如：user:list,user:create" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
			</div>
		</div>
		<!-- /.box-body -->
		<div class="box-footer">
			<button type="button" class="btn btn-default btn-cancel">Cancel</button>
			<button type="button" class="btn btn-info pull-right btn-save">Save</button>
		</div>
		<!-- /.box-footer -->
	</form>
	<!-- zTree 对应的div -->
	<div class="layui-layer layui-layer-page layui-layer-molv layer-anim"
		id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index: 59891016; width: 300px; height: 450px; top: 100px; left: 500px; display: none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>
				<!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a
			class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a> <a
				class="layui-layer-btn1 btn-cancel">取消</a>
		</div>
	</div>

</div>
<script type="text/javascript"
	src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js">
	
</script>
<script type="text/javascript">
	var zTree;
	//初始化zTree时会用到
	var setting = {
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "parentId",
				rootPId : null
			}
		}
	}
	$(function() {
		$("#mainContentId").on("click", ".load-sys-menu", doLoadZtreeNodes);
		$("#menuLayer").on("click", ".btn-confirm", doSetSelectNode).on(
				"click", ".btn-cancel", doHideTree)
		//保存和取消按钮事件注册
		$(".box-footer").on("click", ".btn-cancel", doCancel).on("click",
				".btn-save", doSaveOrUpdate)
		var data = $("#mainContentId").data("rowData");
		if (data)
			doInitEditFormData(data);
	})
	//初始化数据
	function doInitEditFormData(data) {
		/*   $("input[type='radio']").each(function(){
			  if($(this).val()==data.type){
				  $(this).prop("checked",true);
			  }
		  }) */
		$(".typeRadio input[value='" + data.type + "']").prop("checked", true);
		$("#nameId").val(data.name);
		$("#sortId").val(data.sort);
		$("#urlId").val(data.url);
		$("#permissionId").val(data.permission);
		$("#parentId").val(data.parentName);
		$("#parentId").data("parentId", data.parentId);
	}
	function doSaveOrUpdate() {
		//1.获取表单数据
		var params = doGetEditFormData();
		var rowData = $("#mainContentId").data("rowData");
		//2.定义url
		var insertUrl = "menu/doSaveObject.do";
		var updateUrl = "menu/doUpdateObject.do";
		var url = rowData ? updateUrl : insertUrl;
		if (rowData)
			params.id = rowData.id;
		//3.异步提交数据
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				doCancel();
			} else {
				alert(result.message);
			}
		});
	}
	//获取表单数据
	function doGetEditFormData() {
		var params = {
			type : $("form input[name='typeId']:checked").val(),
			name : $("#nameId").val(),
			url : $("#urlId").val(),
			sort : $("#sortId").val(),
			permission : $("#permissionId").val(),
			parentId : $("#parentId").data("parentId")
		}
		return params;
	}
	//Cancle 按钮事件处理函数定义
	function doCancel() {
		$("#mainContentId").load("menu/doMenuListUI.do", function() {
			$("#mainContentId").removeData();
			$("#parentId").removeData();
		});
	}

	function doSetSelectNode() {
		console.log("zTree:", zTree);
		var nodes = zTree.getSelectedNodes();
		if (nodes.length == 1) {
			var node = nodes[0];
			console.log("node", node);
			//将选中的内容保存下来
			$("#parentId").data("parentId", node.id)
			$("#parentId").val(node.name);

		}

		doHideTree();
	}

	//下拉树隐藏
	function doHideTree() {
		$("#menuLayer").hide()
	}

	function doLoadZtreeNodes() {
		// $("#menuLayer").show();

		var url = "menu/doFindZtreeMenuNodes.do";
		// 发送请求，获取数据
		$.getJSON(url, function(result) {
			console.log("result: ", result);
			if (result.state == 1) {
				$("#menuLayer").css("display", "block");
				zTree = $.fn.zTree.init($("#menuTree"), setting, result.data)
			} else {
				alert(result.message)
			}
		})
	}
</script>








